<template>
  <div class="child-page2">
    <Header title="ChildPage2" go-back="true"></Header>
    <div class="hello" :style="'height:'+height+';width:100%'">
      <audio id="player" src="http://m10.music.126.net/20190110141937/d9093b77eac1c5bbce85eb95d18a78d6/ymusic/b550/99d2/9354/4d6ef08a3f9ab13b87fb34079d51a5f8.mp3" autoplay>
        您的浏览器不支持 audio 标签。
      </audio>
      <div class="c">
        <div class="tc font30 mb15">{{g}}</div>
      </div>
      <div style="padding-top: 50px">
        <span @click="$router.push('/songLyric')">点击歌词</span>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
export default {
  name: 'childPage2',
  data () {
    return {
      g: '',
      gd: {
        up: null,
        down: null
      },
      p: null,
      lrc: '[by:dearjulie]\n[ti:陪我到以后]\n[ar:王心凌&罗志祥]\n[al:242572]\n[offset:0]\n[00:00.00] 作曲 : 高姗 \n[00:01.00] 作词 : 高姗 \n[00:12.450]你给我了一个微笑 \n[00:14.570]我可不可以用一个拥抱 还你 \n[00:20.770]你让我又心跳 \n[00:22.390]哎哟 我有什么办法也叫你神魂颠倒 \n[00:29.070]你的眼睛在笑 我望着就中了毒药 \n[00:32.840]就快要 受不了 \n[00:37.440]你的声音在绕 还带自动循环特效 \n[00:41.440]有没有暂停键可以stop \n[00:49.930]我们还要 走很长的时间 \n[00:58.370]千万不要 把我甩在 你身后边 \n[01:08.640]我和你要去闻闻新鲜的春天 \n[01:12.860]感受阳光洒满肩上的夏天 \n[01:17.160]整个世界涂着金色的秋天 \n[01:21.310]飘雪的冬天 \n[01:25.520]也许想着未来的事情太遥远 \n[01:29.570]一起去环游世界也很难实现 \n[01:33.800]但你出现 在我身边 \n[01:37.950]就是我可以遇见的最大的惊艳 \n[01:54.810]我本来是很冷漠的 \n[01:56.850]为什么会一下就被你的眼神打倒 \n[02:03.010]我原来是很聪明的 \n[02:05.070]为什么会一见到你就丢掉大脑 \n[02:11.380]你知道我很淡定的 \n[02:13.440]为什么现在睡着觉都还在偷笑 \n[02:19.710]你明白我很独立的 \n[02:21.860]为什么现在变得 oh no 无法思考 \n[02:32.320]我们还要 去更大的世界 \n[02:40.650]千万不要 把我甩在 你身后边 \n[02:50.990]我和你要去闻闻新鲜的春天 \n[02:55.130]感受阳光洒满肩上的夏天 \n[02:59.350]整个世界涂着金色的秋天 \n[03:03.480]飘雪的冬天 \n[03:07.650]也许想着未来的事情太遥远 \n[03:11.820]一起去环游世界也很难实现 \n[03:15.930]但你出现 在我身边 \n[03:20.170]就胜过什么五彩缤纷轰轰烈烈风风火火花天酒地的世界',
      lrcObj: null,
      height: 'auto'
    }
  },
  mounted () {
    this.p = document.querySelector('#player')
    let _this = this
    this.lrcObj = this.jx()
    console.log(this.lrcObj)
    this.p.addEventListener('timeupdate', function () {
      let obj = _this.lrcObj[Math.floor(this.currentTime)]
      if (obj !== undefined) {
        _this.g = obj
      }
    })
    this.height = window.innerHeight + 'px'
    window.onresize = () => {
      _this.height = window.innerHeight + 'px'
    }
  },
  methods: {
    jx () {
      var lyrics = this.lrc.split('\n')
      console.log(lyrics)
      var lrcObj = {}
      for (var i = 0; i < lyrics.length; i++) {
        var lyric = decodeURIComponent(lyrics[i])
        var timeReg = /\[\d*:\d*(\.\d*)*\]/g
        var timeRegExpArr = lyric.match(timeReg)
        if (!timeRegExpArr) continue
        var clause = lyric.replace(timeReg, '')
        for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
          var t = timeRegExpArr[k]
          var min = Number(String(t.match(/\[\d*/i)).slice(1)),
            sec = Number(String(t.match(/\:\d*/i)).slice(1))
          var time = min * 60 + sec
          lrcObj[time] = clause
        }
      }
      return lrcObj
    }
  },
  components: {
    Header
  }
}
</script>

<style scoped>
  .child-page2{
    width: 100%;
   padding-top: 50px;
  }
  .hello{
    background-size: 100% 100%;
    background-image: url("../../../assets/Image/playBg.png")
  }
  .c{
    color: #927712;
  }
  .tc{
    text-align: center;
    margin:0 auto;
  }
  .mb15{
    margin-bottom: 15px;
  }
  .font40{
    font-size: 4rem;
  }
  .font30{
    font-size: 3rem;
  }
</style>
